﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Wijmo.Master" AutoEventWireup="true"
    CodeBehind="Animation.aspx.cs" Inherits="ControlExplorer.Dialog.Animation" %>

<%@ Register Assembly="C1.Web.Wijmo.Controls.3" Namespace="C1.Web.Wijmo.Controls.C1Dialog"
    TagPrefix="cc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
    <cc1:C1Dialog ID="dialog" runat="server" Width="550px" Height="240px" Title="动画">
        <Content>
            <h2>
                对话框</h2>
            <br />
            <span>这是用来显示信息的默认对话框。这个对话窗口可以被移动，重新设置大小，用‘X’图标关闭。</span>
        </Content>
    </cc1:C1Dialog>
    <script type="text/javascript">
        function dialogMethod(p) {
            $('#<%=dialog.ClientID%>').c1dialog(p);
        }
        $(document).ready(function () {

            $('#<%=expandEffectTypes.ClientID%>').change(function () {
                var ee = $("#<%=expandEffectTypes.ClientID%> option:selected").val();
                $("#<%=dialog.ClientID%>").c1dialog("option", "expandingAnimation", { animated: ee, duration: 500 });
            });

            $('#<%=collapseEffectTypes.ClientID%>').change(function () {
                var ce = $("#<%=collapseEffectTypes.ClientID%> option:selected").val();
                $("#<%=dialog.ClientID%>").c1dialog("option", "collapsingAnimation", { animated: ce, duration: 500 });
            })

            $('#<%=showEffectTypes.ClientID%>').change(function () {
                var ee = $("#<%=showEffectTypes.ClientID%> option:selected").val();
                $("#<%=dialog.ClientID%>").c1dialog("option", "show", ee);
            });

            $('#<%=hideEffectTypes.ClientID%>').change(function () {
                var ce = $("#<%=hideEffectTypes.ClientID%> option:selected").val();
                $("#<%=dialog.ClientID%>").c1dialog("option", "hide", ce);
            })
        });
    </script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="Description" runat="server">
    <p>
        此示例展示了怎样对<strong>C1Dialog </strong>控件进行打开、关闭、扩展和折叠。
    </p>
    通过下列属性可以实现这些功能：
    <ul>
        <li><b>ExpandingAnimation</b></li>
        <li><b>CollapsingAnimation</b></li>
        <li><b>Show</b></li>
        <li><b>Hide</b></li>
    </ul>

</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ControlOptions" runat="server">
    <asp:Button ID="Button1" runat="server" Text="打开对话框" OnClientClick="dialogMethod('open'); return false;" />
    <asp:Button ID="Button2" runat="server" Text="隐藏对话框" OnClientClick="dialogMethod('close'); return false;" />
    <div class="option-row">
        <label for="showingEffectTypes">
            打开时动画
        </label>
        <asp:DropDownList ID="showEffectTypes" runat="server">
            <asp:ListItem Value="blind" Selected="True">百叶窗</asp:ListItem>
            <asp:ListItem Value="bounce">弹跳</asp:ListItem>
            <asp:ListItem Value="clip">回形</asp:ListItem>
            <asp:ListItem Value="drop">拖入</asp:ListItem>
            <asp:ListItem Value="explode">爆炸</asp:ListItem>
            <asp:ListItem Value="fade">淡入/淡出</asp:ListItem>
            <asp:ListItem Value="fold">折叠</asp:ListItem>
            <asp:ListItem Value="highlight">高亮</asp:ListItem>
            <asp:ListItem Value="puff">膨胀</asp:ListItem>
            <asp:ListItem Value="pulsate">闪烁</asp:ListItem>
            <asp:ListItem Value="scale">扩展</asp:ListItem>
            <asp:ListItem Value="size">闪现</asp:ListItem>
            <asp:ListItem Value="slide">滑动</asp:ListItem>
        </asp:DropDownList>
    </div>
    <div class="option-row">
        <label for="showingEffectTypes">
            隐藏时动画
        </label>
        <asp:DropDownList ID="hideEffectTypes" runat="server">
            <asp:ListItem Value="blind">百叶窗</asp:ListItem>
           <asp:ListItem Value="bounce">弹跳</asp:ListItem>
            <asp:ListItem Value="clip">回形</asp:ListItem>
            <asp:ListItem Value="drop">拖入</asp:ListItem>
            <asp:ListItem Value="explode" Selected="True">爆炸</asp:ListItem>
            <asp:ListItem Value="fade">淡入/淡出</asp:ListItem>
            <asp:ListItem Value="fold">折叠</asp:ListItem>
            <asp:ListItem Value="highlight">高亮</asp:ListItem>
            <asp:ListItem Value="puff">膨胀</asp:ListItem>
            <asp:ListItem Value="pulsate">闪烁</asp:ListItem>
            <asp:ListItem Value="scale">收缩</asp:ListItem>
            <asp:ListItem Value="size">闪现</asp:ListItem>
            <asp:ListItem Value="slide">滑动</asp:ListItem>
        </asp:DropDownList>
    </div>
    <div class="option-row">
        <label for="showingEffectTypes">
            扩展时动画
        </label>
        <asp:DropDownList ID="expandEffectTypes" runat="server">
            <asp:ListItem Value="blind">百叶窗</asp:ListItem>
             <asp:ListItem Value="bounce">弹跳</asp:ListItem>
            <asp:ListItem Value="clip">回形</asp:ListItem>
            <asp:ListItem Value="drop">拖入</asp:ListItem>
            <asp:ListItem Value="explode">爆炸</asp:ListItem>
            <asp:ListItem Value="fade">淡入/淡出</asp:ListItem>
            <asp:ListItem Value="fold">折叠</asp:ListItem>
            <asp:ListItem Value="highlight" Selected="True">高亮</asp:ListItem>
            <asp:ListItem Value="puff">膨胀</asp:ListItem>
            <asp:ListItem Value="pulsate">闪烁</asp:ListItem>
            <asp:ListItem Value="scale">扩展</asp:ListItem>
            <asp:ListItem Value="size">闪现</asp:ListItem>
            <asp:ListItem Value="slide">滑动</asp:ListItem>
        </asp:DropDownList>
    </div>
    <div class="option-row">
        <label for="showingEffectTypes">
            折叠时动画
        </label>
        <asp:DropDownList ID="collapseEffectTypes" runat="server">
           <asp:ListItem Value="blind">百叶窗</asp:ListItem>
           <asp:ListItem Value="bounce">弹跳</asp:ListItem>
            <asp:ListItem Value="clip">回形</asp:ListItem>
            <asp:ListItem Value="drop">拖入</asp:ListItem>
            <asp:ListItem Value="explode">爆炸</asp:ListItem>
            <asp:ListItem Value="fade">淡入/淡出</asp:ListItem>
            <asp:ListItem Value="fold">折叠</asp:ListItem>
            <asp:ListItem Value="highlight">高亮</asp:ListItem>
            <asp:ListItem Value="puff" Selected="True">膨胀</asp:ListItem>
            <asp:ListItem Value="pulsate">闪烁</asp:ListItem>
            <asp:ListItem Value="scale">收缩</asp:ListItem>
            <asp:ListItem Value="size">闪现</asp:ListItem>
            <asp:ListItem Value="slide">滑动</asp:ListItem>
        </asp:DropDownList>
    </div>
</asp:Content>
